<template>
  <div class="SearchSuggest" >
     <div class="top" >
        <span>搜索> {{value}}‘相关</span>
     </div>
     <ul class="serch_content">
       <li
        class="item" 
        @mousedown ="toSearch(item.title)" 
        v-for="(item, index) in list"
        :key="index"
        >
         {{ item.title }} -<small class="artists">{{item.artists}}</small>
        </li>
     </ul>
  </div>
</template>

<script>
import { searchSuggest } from "../../../network/search";
import { tool } from "../../../components/tool/tool";
export default {
   props:["value"],
   data() {
    return {
      list: [],
      title: this.value,
    };
   },
    methods:{
     toSearch(index){
       this.$emit("input",index)
    },
     getSearchSuggest() {
      if (this.value !== "" && this.title !== this.value) {
        this.list = []; // 当搜索的内容发生修改的时候  清空原来的内容
        searchSuggest(this.value).then((res) => {
          for (const item of res.data.result.songs) {
            this.list.push({
              title: item.name,
               artists:item.artists[0].name
            });
          }
        });
      }
      this.title = this.keyword;
    }
  },
   watch: {
    value() {
      // 创建变量接收 防抖 函数的返回值
      // 传入异步请求 ，延迟时间
      const func = tool(this.getSearchSuggest, 100);
      // 执行防抖函数返回的函数
      func();
    }
   },
}
</script>


<style scoped>
.SearchSuggest {width: 24%; padding-bottom: 15px; background-color: #fff; position: absolute; z-index: 1000; top: 163px; right: 538px; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.281); border-radius: 6px;}
.top{height: 30px;border-bottom: 1px solid #ececec;font-size: 12px;color: rgb(21, 117, 206);}
.top span{display:block;line-height: 30px;margin-left: 10px;}
.serch_content{padding-left: 35px;border-left: 1px solid #ececec;}
.item{padding-left: 37px;line-height: 25px;font-size: 13px;color:#333; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;word-wrap: normal;}
.item .artists{color:rgb(21, 117, 206) ;}
.item:hover {
  background-color: #ececec;
  cursor: pointer;
}
</style>